<template>
    <div class="filter-nav">
        <div class="filter-item" v-for="(item, index) in list" :key="index">
            {{ item }}
            <span class="iconfont icon-jiantou-tianchong"></span>
        </div>
    </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";

const list = ref(["全程", "品牌", "特色"]);
</script>

<style lang="less" scoped>
.filter-nav {
    height: 40px;
    width: 100%;
    .flex-center-between();
    border-bottom: 1px solid #e5e5e5;
    .filter-item {
        color: #777;
        font-size: 13px;
        text-align: center;
        flex: 1;
        line-height: 40px;
        span {
            font-size: 8px;
            color: #777;
        }
    }
    > div:nth-child(2) {
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
    }
}
</style>
